<script setup lang="ts">
import type { BasicCheckGroupProps } from '@/components/form/src/components/checkbox-group/props';

const props = withDefaults(defineProps<BasicCheckGroupProps>(), {
  disabled: false,
  defaultFirst: false,
  labelField: 'label',
  valueField: 'value',
});
const emits = defineEmits<{
  (e: 'update:value', value: Array<string | number> | null): void;
}>();

const localValue = ref(props.value);
const options = ref(props.options);

function handleUpdateValue(
  _value: string | number,
  _meta: { actionType: 'check' | 'uncheck'; value: string | number },
) {
  emits('update:value', localValue.value);
}
</script>

<template>
  <NCheckboxGroup :value="localValue" @update:value="handleUpdateValue">
    <NSpace>
      <NCheckbox
        v-for="option of options"
        :key="option.value"
        :value="option.value"
        :label="option.label"
      />
    </NSpace>
  </NCheckboxGroup>
</template>

<style scoped lang="less">

</style>
